<template>
  <div class="device-video">
    <!-- 上传 -->
    <uploader
      :options="options"
      :fileStatusText="fileStatusText"
      class="uploader-example"
      :autoStart="false"
      ref="uploader"
      @file-added="onFileAdded"
      @file-success="onFileSuccess"
      style="width: 100%"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop @click.native="changeUpload">
        <span class="upload-info">将资源上传至服务器( 只支持.zip压缩文件) </span>
        <uploader-btn class="upload-btn">上传</uploader-btn>
      </uploader-drop>
      <uploader-list v-if="panelShow"></uploader-list>
    </uploader>
  </div>
</template>

<script>
import SparkMD5 from 'spark-md5';
// import { POST_UPLOAD_FILE, POST_JOIN_FILE } from '../api/base';
import { getData, postData } from '@/service/getData';
export default {
  name: 'home',
  computed: {
    // Uploader实例
    uploader() {
      return this.$refs.uploader.uploader;
    },
  },
  data() {
    return {
      fileStatusText: {
        success: '成功',
        error: '失败',
        uploading: '上传中',
        paused: '暂停',
        waiting: '等待',
      },

      upload_id: '',
      options: {
        // target: POST_UPLOAD_FILE, // 目标上传 URL
        target: '/api/knowledge_base/files/chunk_upload/',

        headers: {
          usertoken: localStorage.getItem('data_user_token'),
          datauserid: localStorage.getItem('data_user_id'),
        },
        // target: ' //localhost:3000/upload',
        //chunkSize: 1024000 * 5, //
        chunkSize: 1024 * 1000, // 分块大小
        // fileParameterName: 'file', // 上传文件时文件的参数名，默认file
        maxChunkRetries: 3, // 最大自动失败重试上传次数
        testChunks: true, // 是否开启服务器分片校验
        testMethod: 'POST', //
        // 服务器分片校验函数，秒传及断点续传基础
        checkChunkUploadedByResponse: function (chunk, message) {
          console.log('服务器校验分片', chunk, message);
          chunk.merge = true;
          let objMessage = JSON.parse(message);
          if (objMessage.message) {
            chunk.merge = false;
            return true;
          }

          return (objMessage.chunk_id_list || []).indexOf(chunk.offset + 1) >= 0;
        },
      },
      panelShow: false, // 选择文件后，展示上传panel
      activeName: 'first',
    };
  },
  mounted() {},
  methods: {
    changeUpload() {
      this.panelShow = !this.panelShow;
    },
    statusSet(id, status) {
      let statusMap = {
        md5: {
          text: '校验MD5',
          bgc: '#fff',
        },
        merging: {
          text: '合并中',
          bgc: '#e2eeff',
        },
        transcoding: {
          text: '转码中',
          bgc: '#e2eeff',
        },
        failed: {
          text: '上传失败',
          bgc: '#e2eeff',
        },
      };

      console.log(statusMap[status].text);
    },
    onFileAdded(file) {
      // Object.assign(this.uploader.opts, {
      //   query: {
      //     data_user_id: localStorage.getItem('data_user_id'),
      //     file_name: file.name,
      //     chunk,
      //     ...this.params,
      //   },
      // });
      var _this = this;
      postData(
        '/api/knowledge_base/files/chunk_upload_init/',
        {
          file_name: file.name,
          total_size: file.size,
          file_hash: '',
          chunk_size: this.options.chunkSize,
        },
        'post',
      )
        .then((res) => {
          // 将数组反转
          _this.upload_id = res.upload_id;
          _this.panelShow = true;
          _this.computeMD5(file);
        })
        .catch((e) => {});
    },
    computeMD5(file) {
      let fileReader = new FileReader();
      let time = new Date().getTime();
      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
      let currentChunk = 0;
      // const chunkSize = 10 * 1024 * 1000;
      const chunkSize = this.options.chunkSize;
      let chunks = Math.ceil(file.size / chunkSize);
      let spark = new SparkMD5.ArrayBuffer();

      // 文件状态设为"计算MD5"
      this.statusSet(file.id, 'md5');

      console.log('计算md5', spark.end());
      // file.uniqueIdentifier
      file.pause();

      loadNext();

      fileReader.onload = (e) => {
        spark.append(e.target.result);
        if (currentChunk < chunks) {
          currentChunk++;
          loadNext();
          // 实时展示MD5的计算进度
          this.$nextTick(() => {
            // $(`.myStatus_${file.id}`).text(
            //     '校验MD5 ' +
            //         ((currentChunk / chunks) * 100).toFixed(0) +
            //         '%'
            // );
          });
        } else {
          let md5 = spark.end();
          this.computeMD5Success(md5, file, currentChunk);
          console.log(
            `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${
              new Date().getTime() - time
            } ms`,
          );
        }
      };
      fileReader.onerror = function () {
        this.error(`文件${file.name}读取出错，请检查该文件`);
        file.cancel();
      };
      function loadNext() {
        let start = currentChunk * chunkSize;
        let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
      }
    },
    computeMD5Success(md5, file, chunk) {
      console.log('查看参数!!!!!!!!!!!!!!!!!!!!!!', md5, file, chunk);
      // 将自定义参数直接加载uploader实例的opts上
      Object.assign(this.uploader.opts, {
        query: (file, chunk) => {
          return {
            file_name: file.name,
            upload_id: this.upload_id,
            chunk_index: chunk.offset + 1, // 添加分片下标
            ...this.params,
          };
        },
      });
      this.chunk++;
      file.uniqueIdentifier = md5;
      file.resume();
      this.statusRemove(file.id);
    },
    statusRemove(id) {
      console.log('remove', id);
    },
    onFileSuccess(rootFile, file, response, chunk) {
      // 分片的文件需要调用合并接口 秒传成功的话
      if (chunk.merge) {
        console.log('是否需要合并', rootFile, file, response, chunk);
        let form = new FormData();
        form.append('file_name', rootFile.name);
        form.append('identifier', rootFile.uniqueIdentifier);
        form.append('data_user_id', localStorage.getItem('data_user_id'));
        form.append('file_size', rootFile.size);
        // 合并文件

        postData(
          '/api/knowledge_base/files/chunk_upload_complete/',
          {
            upload_id: this.upload_id,
            folder_id: 275,
          },
          'post',
        )
          .then((res) => {
            // 将数组反转
          })
          .catch((e) => {})
          .finally((v) => {});

      } else {
        this.$emit('updateFileList');
      }
    },
    onFileProgress(rootFile, file, chunk) {
      console.log(
        `上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${
          chunk.endByte / 1024 / 1024
        }`,
      );
    },
    onFileError(rootFile, file, response, chunk) {
      console.log('onFileError');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    useData(id) {
      console.log('使用的ID:' + id);
    },
  },
};
</script>
<style scoped>
.device-video {
  margin-bottom: 10px;
}
</style>
